<template>
  <div class="whiteSet">
    <div class="deco-control">
      <div class="deco-control-group">
        <div class="deco-control-group-container">
          <div class="deco-control-group__header">
            <div class="deco-control-group__label">框体样式</div>
            <div class="deco-control-group__value">
              {{ config.frameType ? '辅助线' : '辅助空白' }}
            </div>
          </div>
          <div class="deco-control-group__content">
            <el-radio-group v-model="config.frameType" size="mini">
              <el-radio-button :label="0">
                <i class="el-icon-picture"></i>
              </el-radio-button>
              <el-radio-button :label="1">
                <i class="el-icon-picture"></i>
              </el-radio-button>
            </el-radio-group>
          </div>
        </div>

        <div class="deco-control-group-container" v-if="!config.frameType">
          <div class="deco-control-group__header">
            <div class="deco-control-group__label">框体高度</div>
          </div>
          <div class="deco-control-group__content">
            <el-slider
              :max="100"
              v-model="config.height"
              style="width:160px;margin-right:10px;"
            ></el-slider>
            <el-input-number
              size="small"
              style="width:60px;"
              v-model="config.height"
              :min="1"
              :controls="false"
            ></el-input-number>
          </div>
        </div>

        <template v-else>
          <div class="deco-control-group-container">
            <div class="deco-control-group__header">
              <div class="deco-control-group__label">选择样式</div>
              <div class="deco-control-group__value">
                {{
                  config.lineType === 'solid'
                    ? '实线'
                    : config.lineType === 'dashed'
                    ? '虚线'
                    : '点线'
                }}
              </div>
            </div>
            <div class="deco-control-group__content">
              <el-radio-group v-model="config.lineType" size="mini">
                <el-radio-button label="solid">
                  <i class="el-icon-picture"></i>
                </el-radio-button>
                <el-radio-button label="dashed">
                  <i class="el-icon-picture"></i>
                </el-radio-button>
                <el-radio-button label="dotted">
                  <i class="el-icon-picture"></i>
                </el-radio-button>
              </el-radio-group>
            </div>
          </div>

          <div class="deco-control-group-container">
            <div class="deco-control-group__header">
              <div class="deco-control-group__label">左右边距</div>
              <div class="deco-control-group__value">
                {{ config.hasPadding ? '左右留边' : '无边距' }}
              </div>
            </div>
            <div class="deco-control-group__content">
              <el-radio-group v-model="config.hasPadding" size="mini">
                <el-radio-button :label="0">
                  <i class="el-icon-picture"></i>
                </el-radio-button>
                <el-radio-button :label="1">
                  <i class="el-icon-picture"></i>
                </el-radio-button>
              </el-radio-group>
            </div>
          </div>

          <div class="deco-control-group-container">
            <div class="deco-control-group__header">
              <div class="deco-control-group__label">辅助线颜色</div>
              <div class="deco-control-group__value">
                {{ config.color }}
              </div>
            </div>
            <div class="deco-control-group__content">
              <el-color-picker
                v-model="config.color"
                color-format="hex"
                :predefine="defaultColor"
              />
            </div>
          </div>
        </template>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ['value','defaultColor'],
  data() {
    return {
      config: this.value ? this.value : {},
      rules: {}
    }
  },
  watch: {
    value(newVal) {
      this.config = newVal
    },
    config(newVal, oldVal) {
      this.$emit('input', newVal)
    }
  },
  methods: {}
}
</script>

<style lang="less">
@import './common.less';

</style>
